﻿@model CreationListViewModel
@using STF.Blog.Dtos
@using STF.Blog.WebApp.Models.Creation

@{
    var level = (List<LeveLDto>)ViewBag.Level;
    var ReleForm = (List<ReleaseFormDto>)ViewBag.ReleaseForm;
    var article = (List<ArticleCateGoryDto>)ViewBag.ArticleList;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Creation</title>
    <link rel="stylesheet" href="~/Web/css/creation.css" />
    
    <link rel="stylesheet" href="~/summernote-0.8.12-dist/dist/summernote-bs4.css" />
   
</head>
<body>

    <div class="container-lg" style="background: #FFFFFF;">
        <div class="row">
            <div class="col-lg-12">
                <form asp-action="Creation" asp-controller="Home" enctype="multipart/form-data" method="post">

                    <div class="form-group asd">
                        <label for="" class="control-label">文章标题:</label>
                        <input asp-for="Title" class="form-control" />
                    </div>

                    <div class="form-group">
                        <label for="" class="control-label">文章内容:</label>
                        <textarea asp-for="Context"></textarea>
                    </div>

                    <div class="form-group">
                        <label for="" class="control-label">文章封面:</label>
                        <input type="file" name="Cover" id="Cover" />
                    </div>

                    <div class="form-group">
                        <label for="" class="control-label">文章标签:</label>
                        <select asp-for="ArticleTag" asp-items="@ViewBag.ArticleTag" id="Tag" class="form-control">
                            <option value="0">请选择</option>
                        </select>
                        <div id="Tag-ParentList"></div>
                    </div>

                    <div class="form-group" id="ColumnItems">
                        <label for="" class="control-label">分类专栏:</label>
                        <select asp-for="ClassColumn" asp-items="@ViewBag.ClassColumn" class="form-control">
                            <option value="0">请选择</option>
                        </select>
                        <div id="Column"></div>
                        <button type="button" class="btn ctcheck" id="Cg-Column">新建分栏</button>
                    </div>

                    <div class="form-group">
                        <label for="" class="control-label">文章类型:</label>
                        @foreach(var blog in article)
                        {
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="ArticleCategoryTitle" id="" value="@blog.Id">
                                <label class="form-check-label" for="">@blog.Title</label>
                            </div>
                        }
                    </div>

                    <div class="form-group">
                        <label for="" class="control-label">发布形式:</label>
                        @foreach(var re in ReleForm)
                        {
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="ReleaseFormTitle" id="" value="@re.Id">
                                <label class="form-check-label" for="">@re.Title</label>
                            </div>
                        }
                    </div>

                    <div class="form-group">
                        <label for="" class="control-label">内容等级:</label>
                        @foreach(var lv in level)
                        {
                            <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="LevelTitle" id="" value="@lv.Id">
                            <label class="form-check-label" for="">@lv.Title</label>
                        </div>
                        }
                    </div>

                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-9 offset-md-2">
                                <div class="row">
                                    <div class="col-4 creations">
                                        <button class="btn btn-outline-primary">保存草稿</button>
                                    </div>
                                    <div class="col-4 creations">
                                        <button class="btn btn-outline-primary">定时发布</button>
                                    </div>
                                    <div class="col-4 creations">
                                        <button class="btn ctcheck" style="background-color: #F1562D;">发布博客</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>

@section Scripts
{
    <script src="~/summernote-0.8.12-dist/popper/node_modules/_popper.js@1.11.0@popper.js/dist/umd/popper.js"></script>
    <script src="~/Web/bootstrap-4.6.1-dist/js/bootstrap.js"></script>
    <script src="~/summernote-0.8.12-dist/dist/summernote-bs4.js"></script>
    <script src="~/summernote-0.8.12-dist/dist/lang/summernote-zh-CN.js"></script>
    <script>
        $(document).ready(function() {
            $('#Context').summernote({
                lang: 'zh-CN', // 语言
                height: 496, // 高度
                width: 1100,
                minHeight: 300, // 最小高度

                callbacks:{
                        onImageUpload:function(files){
                            //获取图片信息
                            //(1)创建一个表单数据对象
                            var formData = new FormData();
                            //(2)把参数当中与图片上传相关的数据存入上面的对象当中
                            formData.append("file",files[0]);
                            //(3)调用Ajax,把我们存储的图片信息发送给后面的控制器当中的方法,并且实现上传图片功能
                            $.ajax({
                                url:'../../Home/UploadImageAjax',
                                type:'post',
                                data:formData,
                                processData:false,
                                contentType:false,
                                success:function(result){
                                    //当我们数据提交成功时,我们要求把上传的图片信息名称等等内容,传递回来,并且要求在界面内进行展示
                                    $("#Context").summernote('insertImage',result,'jpg');
                                }
                            });
                        }
                    }
            });
        });

        $("#Tag").change(function()
        {
            let tagId = $(this).val();
            console.log(tagId);
            $.get("../../Home/GetTagParentList",{parentId:tagId},function(data)
            {
                let str = "";
                for(let a=0;a<data.length;a++)
                {
                    if(tagId == 0)
                    {
                        $("#Tag-ParentList").empty();
                        return;
                    }
                    str+="<div class='form-check form-check-inline'>";
                    str+="<input class='form-check-input' type='checkbox' name='ArticleTagList' value='"+data[a].id+"'>";
                    str+="<label class='form-check-label' >"+data[a].title+"</label>";
                    str+="</div>";
                }
                $("#Tag-ParentList").html(str);
            },"json");
        });

        $("#Cg-Column").click(function()
        {
            var str ="<input class='form-check-input' type='text' name='ArticleTag' id='columnValue' value='' style='margin-left:0px;'>";
            str += "<button type='button' class='btn ctcheck' id='isJoin' style='margin-left:200px;'>确认新建分栏</button>";
            $("#Column").html(str);

            $("#isJoin").click(function()
            {
                var GetValue = document.getElementById("columnValue").value;
                //console.log(GetValue);
                $.get("../../Home/AddClassColumn",{title:GetValue},function(data)
                {
                    //console.log(data);
                    let str = "<label for='' class='control-label'>分类专栏:</label>";
                    str += "<select name='ClassColumn' class='form-control'>";
                    str +="<option value='0'>请选择</option>";

                    for(let i = 0; i < data.length; i++)
                    {
                        str += "<option value='"+ data[i].id +"'>"+ data[i].title +"</option>";
                    }

                    str += "</select>";
                    str += "<div id='Column'></div>";
                    str += "<button type='button' class='btn ctcheck' id='Cg-Column'>新建分栏</button>";

                    $("#ColumnItems").empty();
                    $("#ColumnItems").html(str);
                    //<label for="" class="control-label">分类专栏:</label>
                    //    <select asp-for="ClassColumn" asp-items="@ViewBag.ClassColumn" class="form-control">
                    //        <option value="0">请选择</option>
                    //    </select>
                    //    <div id="Column"></div>
                    //    <button type="button" class="btn ctcheck" id="Cg-Column">新建分栏</button>
                },"json");
            });

        });

    </script>
}
    

</body>
</html>
